<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="login.css" />
    <script type="text/javascript">
        window.onload = function(){
            document.getElementById("username").onblur = function(){
                var username = document.getElementById("username").value;
                var isUsername = /^[a-zA-Z0-9\u4e00-\u9fa5]{4,10}$/;
                var isOk = isUsername.test(username);
                if (!isOk){
                    alert("用户名只能由4-10位的字母、数字或汉字组成！")
                    document.getElementById("username").value = "";
                }
            }
            document.getElementById("password").onblur = function(){
                var password = document.getElementById("password").value;
                var isPassword = /^[a-zA-Z0-9]{6,16}$/;
                var isOk = isPassword.test(password);
                if (!isOk){
                    alert("密码只能由6-16位的字母或数字组成！")
                    document.getElementById("password").value = "";
                }
            }
            document.getElementById("isPassword").onblur = function(){
                var passwordTwo = document.getElementById("isPassword").value;
                var password = document.getElementById("password").value;
                if (!(password == passwordTwo)){
                    alert("两次密码不一致！");
                    document.getElementById("isPassword").value = "";
                }
            }
            document.getElementById("btn").onclick = function(){
                var username = document.getElementById("username").value;
                var password = document.getElementById("password").value;
                var passwordTwo = document.getElementById("isPassword").value;
                var value = document.getElementById("type").value;
                var address = document.getElementById("address").value;
                if (username != "" && password != "" && passwordTwo != ""){
                    if (value == "1" && address == ""){
                        alert("内容必须填写完整");
                        return;
                    }
                    document.getElementById("formOne").submit();
                } else {
                    alert("内容必须填写完整！");
                }
            }
            document.getElementById("type").onchange = function(){
                let value = document.getElementById("type").value;
                if (value == "1") {
                    document.getElementById("address").style.display = "block";
                } else {
                    document.getElementById("address").style.display = "none";
                }
            }
        }
    </script>
</head>
<body>
<div id="login">
    <br>
    <p align="center" style="font-size: 40px;margin-top: 50px;color: rgb(53,158,255)" >注册</p>
    <center>
        <form action="user/add.do" method="post"  id="formOne">
            <table style="margin-top: 50px; width: 400px;height: 300px;">
                <tr align="center">
                    <td><input id="username" type="text" name="name" style="width: 350px;height: 50px;font-size: 30px;" placeholder="账号"></td>
                </tr>
                <tr align="center">
                    <td><input id="password" type="password" name="password" style="width: 350px;height: 50px;font-size: 30px;" placeholder="密码"></td>
                </tr>
                <tr align="center">
                    <td><input id="isPassword" type="password" style="width: 350px;height: 50px;font-size: 30px;" placeholder="确认密码"></td>
                </tr>
                <tr align="center">
                    <td>
                        <select id="type" name="type" style="width: 350px;height: 50px;font-size: 30px;">
                            <option value="0" >普通用户</option>
                            <option value="1" >商家用户</option>
                            <option value="2" >配送人员</option>
                        </select>
                    </td>
                </tr>
                <tr align="center">
                    <td><input type="text" id="address" style="display: none;width: 350px;height: 50px;font-size: 30px;" name="address" placeholder="店铺地址"/></td>
                </tr>
                <tr align="center">
                    <td>
                        <a href="index_login.jsp">
                            <input type="button" value="去登录" style="width: 100px;height: 50px;font-size: 30px;background-color: rgb(53,158,255)">
                        </a>
                        <input type="button" id="btn" value="注册" style="width: 100px;height: 50px;font-size: 30px;background-color: rgb(53,158,255)">
                    </td>
                </tr>
            </table>
        </form>
    </center>
</div>
</body>
</html>
